﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>K线图-多线段示例</title>  
    <!-- 加载资源 -->
    <link rel="stylesheet" href="../jscommon/umychart.resource/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
</head>  
<body>
    <div id="kline" >
       
    </div>

    <script src="../jscommon/umychart.resource/js/jquery.min.js"></script>
    <script src="../jscommon/umychart.resource/js/webfont.js"></script>
    <script src='../jscommon/umychart.console.js'></script>     <!-- 日志输出 -->
    <script src="../jscommon/umychart.network.js"></script>     <!-- 网络请求分装 -->
    <script src="../jscommon/umychart.js"></script>             <!-- K线图形 -->
    <script src="../jscommon/umychart.complier.js"></script>    <!-- 麦语言解析执行器 -->
    <script src="../jscommon/umychart.index.data.js"></script>  <!-- 基础指标库 -->
    <script src="../jscommon/umychart.style.js"></script>       <!-- 白色风格和黑色风格配置信息 -->

    <script src="../jscommon/umychart.NetworkFilterTest.js"></script>
   
    <script>

        MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol)  { return 2; }
        
        //简单的把K线控件封装下
        function KLineChart(divKLine)
        {
            this.DivKLine=divKLine;
            this.Chart=JSChart.Init(divKLine, false, true);   //把K线图绑定到一个Div上
          
            //K线配置信息
            this.Option= {
                Type:'历史K线图',   //创建图形类型
                //Type:'历史K线图横屏',

                //EnableBorderDrag:false,
                
                Windows: //窗口指标
                [
                    {
                        Index:'多线段指标',
                        API: 
                        {
                            Name:'多线段指标',
                            Script:null,
                            Args:null, 
                            Url:'http://127.0.0.1:18080/api/jsindex' 
                        } 
                    },

                    {Index:"MACD"},
                    {Index:"VOL"},
                ], 

                
                OverlayIndex:
                [
                   
                ],  //叠加指标
                

                //OverlayIndexFrameWidth:1,
                //DragDownload: { Day:{ Enable:true } , Minute:{ Enable:true }}, 

                EnableYDrag:
                {
                    Right:true,
                    Left:true,
                },

                //Language:'EN',

                Symbol:"600000.sh",
                IsAutoUpdate:true,       //是自动更新数据
                AutoUpdateFrequency:3000,   //数据更新频率
                //TradeIndex: {Index:'交易系统-BIAS'},    //交易系统

                SplashTitle:'加载数据中......',
    
                IsShowRightMenu:true,          //右键菜单
                //CorssCursorTouchEnd:true,
                //IsClickShowCorssCursor:true,
                //IsCorssOnlyDrawKLine:true,

                CtrlMoveStep:10,

                //EnableVerifyRecvData:true,

                CorssCursorInfo: { Right:2, DateFormatType:3, HPenType:1, VPenType:1, IsShowClose:false, VLineType:0,RightButton:{ Enable:true }, IsShowCorss:true, PriceFormatType:0, DataFormatType:0 },
                EnableZoomIndexWindow:true,

                DrawTool:       //画图工具
                {
                    //StorageKey:'4E7EA133-D6C8-4776-9869-1DDDCC5FA744'
                },
    
                KLine:  //K线设置
                {
                    DragMode:1,                 //拖拽模式 0=禁止拖拽 1=数据拖拽 2=区间选择
                    Right:1,                    //复权 0 不复权 1 前复权 2 后复权
                    Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                    MaxRequestDataCount:3000,   //数据个数
                    MaxRequestMinuteDayCount:5, //分钟数据获取几天数据  默认取5天数据
                    
                    //Info:["互动易","大宗交易",'龙虎榜',"调研","业绩预告","公告"],       //信息地雷
                    //Info:["公告"], 
                    IsShowTooltip:true,                 //是否显示K线提示信息
                    DrawType:0,      //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
                    //FirstShowDate:20161201,
                    KLineDoubleClick:false, //禁止双击弹框
                    RightSpaceCount:2,
                    ZoomType:0,
                    
                    //PageSize:30,               //一屏显示多少数据
                    DataWidth:10,
                },

                StepPixel:0,

                IsDrawPictureXY:true,

                Listener:
                {
                    //KeyDown:false,
                    //Wheel:false
                },

                SelectedChart:{ EnableSelected: true, EnableMoveOn:true },
                EnableIndexChartDrag:true,
    
                KLineTitle: //标题设置
                {
                    IsShowName:true,       //不显示股票名称
                    IsShowSettingInfo:true, //不显示周期/复权
                    IsTitleShowLatestData:true,
                },
    
                EnableYDrag:
                {
                    Right:true,
                    Left:true,
                },
                
                Border: //边框
                {
                    Left:50,         //左边间距
                    Right:90,       //右边间距
                    Bottom:25,      //底部间距
                    Top:25,         //顶部间距

                    AutoLeft:{ Blank:10, MinWidth:60 },
                    AutoRight:{ Blank:5, MinWidth:60 },
                },
                
                Frame:  //子框架设置
                [
                    {
                        SplitCount:6, 
                        
                        Custom:
                        [
                            
                            { 
                                Type:0,
                                Position:'right',LineType:1, 
                                //PositionEx:1,
                            },
                            
                            { 
                                Type:1, 
                                Position:'right',IsShowLine:true, LineType:0,
                                //PositionEx:1,
                                Data:
                                [
                                    {
                                        Value:7.73,
                                        Color:'rgb(0, 0 ,205)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                        Text:[ {Text:"价格:9.73"}, {Text:"成本线"} ]
                                    },
                                    {
                                        Value:6.50,
                                        Color:'rgb(255 ,165, 79)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                    }
                                ] 
                            },

                            { 
                                Type:1, 
                                Position:'right',IsShowLine:true,LineType:1,PositionEx:1, LineWidth:2, LineDash:[4,4],
                                Data:
                                [
                                    {
                                        Value:8.0,
                                        Color:'rgb(255,185,255)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                    },
                                    {
                                        Value:5.51,
                                        Color:'rgb(255,185,0)', TextColor:'rgb(255,255,255)',    //Color:线段及文字背景色 TextColor:文字颜色
                                    }
                                ] 
                            }
                        ]
                        
                        
                        
                    },

                    { SplitCount:5 },
                    { SplitCount:4 }
                ],

                ExtendChart:    //扩展图形
                [
                    //{Name:'KLineTooltip' },  //手机端tooltip
                    //{Name:"FrameSplitPaint", LineColor:"rgb(200,0,0)" }
                ],


                Overlay:
                [
                    //{Symbol:'399300.sz', DrawType:1, Color:'rgb(0,0,255)'},
                    //{ Symbol:'600999.sh' }
                ],
            };
                 
            this.Create=function()  //创建图形
            {
                var self=this;
                //$(window).resize(function() { self.OnSize( {Type:1} ); });    //绑定窗口大小变化事件
                $(window).resize(function() { self.OnSize( ); });    //绑定窗口大小变化事件

                //var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID); //读取黑色风格配置
                //JSChart.SetStyle(blackStyle);
                //this.DivKLine.style.backgroundColor=blackStyle.BGColor; //设置最外面的div背景
                JSChart.GetResource().ToolbarButtonStyle=1;

                this.OnSize();  //让K线全屏
                this.Option.NetworkFilter=(data, callback)=>{ this.NetworkFilter(data, callback); }
                this.Chart.SetOption(this.Option);  //设置K线配置

            }

            this.NetworkFilter=function(data, callback)
            {
                switch(data.Name) 
                {  
                    case 'APIScriptIndex::ExecuteScript':
                        var request=data.Request;
                        if (request.Data.indexname=='多线段指标') this.RequestMulitLineIndex(data, callback);
                        break;

                    default: 
                        HQData.NetworkFilter(data, callback);
                }
            }

            this.OnSize=function(option)  //自适应大小调整
            {
                var height= $(window).height()-50;
                var width = $(window).width();
                //width=50000;
                this.DivKLine.style.top='0px';
                this.DivKLine.style.left='0px';
                this.DivKLine.style.width=width+'px';
                this.DivKLine.style.height=height+'px';
                this.Chart.OnSize(option);
            }

          
            this.RequestMulitLineIndex=function(data, callback)
            {
                var hqchart=data.HQChart;
                var kData=hqchart.ChartPaint[0].Data;
                var aryClose=kData.GetClose();
                var aryDate=kData.GetDate();
                var closeLine={name:'收盘价线', type:0, data:aryClose };
                var line2= 
                { 
                    name:'MULTI_LINE', type:1, 
                    Draw: { DrawType:'MULTI_LINE', DrawData:[] } //绘制线段数组
                };

                //连线
                var point=
                { 
                    Color:'rgb(255, 0 ,255)', 
                    Point:[] 
                };

                var start=aryClose.length-100;
                for(var i=start;i<aryClose.length;++i)
                {
                    var price=aryClose[i];
                    var value=Math.ceil(Math.random()*10)/1000*price+price; //随机测试数据
                    point.Point.push({ Date:aryDate[i], Value:value });
                }


                //三角形
                var point2=
                { 
                    Color:'rgb(255, 127, 36)', 
                    Point:[] 
                };

                var start=aryClose.length-80;
                var firstPoint, firstDate;
                for(var i=start, j=0;i<aryClose.length;++i, ++j)
                {
                    var price=aryClose[i];
                    if (j==0)
                    {
                        firstPoint=price;
                        firstDate=aryDate[i];
                        point2.Point.push({ Date:aryDate[i], Value:firstPoint });
                    }
                    else if (j==5)
                    {
                        point2.Point.push({ Date:aryDate[i], Value:price*(1+0.04) });
                    }
                    else if (j==10)
                    {
                        point2.Point.push({ Date:aryDate[i], Value:firstPoint });
                        point2.Point.push({ Date:firstDate, Value:firstPoint });
                    }
                }

                line2.Draw.DrawData.push(point);
                line2.Draw.DrawData.push(point2);
                
                var apiData=
                {
                    code:0, 
                    stock:{ name:hqchart.Name, symbol:hqchart.Symbol }, 
                    outdata: { date:kData.GetDate() , outvar:[line2] } 
                };
                
                data.PreventDefault=true;
                console.log('[KLineChart::RequestMulitLineIndex] apiData ', apiData);
                callback(apiData);
            }
           
           
        }

        $(function () 
        {
           
           
            var klineControl=new KLineChart(document.getElementById('kline'));
            klineControl.Create();
        })

      
    </script>  
</body>  
</html>



<style>

#kline
{
    width: 900px;
    height:400px;
    position: relative;
    /*margin-top: 100px;*/
}

.btn-style
{
    padding: 3px 8px;
    border: 1px solid #ececec;
    border-radius: 5px;
    background-color: #f5f5f5;
    cursor: pointer;
}

    
</style>